<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Products</title>
    <link rel="shortcut icon" th:href="@{/frontend/images/favicon.ico}"
          href="../../static/frontend/images/favicon.ico"/>
    <link href="../../static/frontend/css/bootstrap.css" th:href="@{/frontend/css/bootstrap.css}" rel="stylesheet"
          type="text/css" media="all"/>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../../static/frontend/js/jquery.min.js" th:src="@{/frontend/js/jquery.min.js}"></script>
    <!-- Custom Theme files -->
    <script src="../../static/frontend/layer/layer.js" th:src="@{/frontend/layer/layer.js}"></script>
    <!--theme-style-->
    <link href="../../static/frontend/css/style.css" th:href="@{/frontend/css/style.css}" rel="stylesheet"
          type="text/css" media="all"/>
    <!--//theme-style-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Fashion Mania Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);
    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- start menu -->
    <link href="../../static/frontend/css/memenu.css" th:href="@{/frontend/css/memenu.css}" rel="stylesheet"
          type="text/css" media="all"/>
    <link href="../../static/backend/css/Pager.css" th:href="@{/backend/css/Pager.css}" rel="stylesheet"
          type="text/css"/>
    <script type="text/javascript" src="../../static/frontend/js/memenu.js" th:src="@{/frontend/js/memenu.js}"></script>
    <script>$(document).ready(function () {
        $(".memenu").memenu();
    });</script>
    <script src="../../static/frontend/js/simpleCart.min.js" th:src="@{/frontend/js/simpleCart.min.js}"></script>
    <script src="../../static/backend/js/jquery.pager.js" th:src="@{/backend/js/jquery.pager.js}"
            type="text/javascript"></script>
    <!-- slide -->
</head>
<body>
<!--header-->

<div th:replace="frontend/common::header"></div>
<!--content-->
<div class="products">
    <!--请求该页面时的数据，隐藏在这里，后续ajax请求会用到-->
    <input type="hidden" id="typeId" th:value="${typeId}"/>
    <input type="hidden" id="categoryId" th:value="${categoryId}"/>
    <div class="container" style="width:1300px">
        <h1 th:text="${'产品列表--'+name}">产品列表</h1>
        <div class="col-md-9">
            <div class="content-top1">

                <div class="clearfix"></div>
            </div>

        </div>
        <div class="col-md-3 product-bottom">
            <!--categories-->
            <div class=" rsidebar span_1_of_left">
                <h3 class="cate">分类</h3>
                <ul class="menu-drop">
                    <li id="s101" class="items"><a href="/fleastreet/category/101">书籍</a>
                        <ul class="cute">
                        </ul>
                    </li>
                    <li id="s102" class="items"><a href="/fleastreet/category/102">日用品</a>
                        <ul class="cute">

                        </ul>
                    </li>
                    <li id="s103" class="items"><a href="/fleastreet/category/103">电子产品</a>
                        <ul class="cute">

                        </ul>
                    </li>
                </ul>
            </div>
            <!--initiate accordion-->
            <script type="text/javascript">
                var pagetotal;
                var pageSize = 12;
                var typeId = $("#typeId").val();
                var categoryId = $("#categoryId").val();
                var urlone;//获取总数，可能是category查询，也可能是type查询
                var urltwo;//获取分页查询结果，可能是category查询或者type查询
                if (typeId != null && categoryId == "") {
                    urlone = "/fleastreet/product/total/type/" + typeId;
                    urltwo = "/fleastreet/product/list/type/" + typeId + "/";
                }
                if (typeId == "" && categoryId != null) {
                    urlone = "/fleastreet/product/total/category/" + categoryId;
                    urltwo = "/fleastreet/product/list/category/" + categoryId + "/";
                }
                $(function () {
                            $.ajax({
                                url: urlone,
                                type: "get",
                                success: function (result) {
                                    if (result.code == 0) {
                                        pagetotal = Math.ceil(result.data / pageSize);
                                        $("#pager").pager({
                                            pagenumber: 1,
                                            pagecount: pagetotal,
                                            buttonClickCallback: PageClick
                                        });
                                    } else {
                                        layer.msg("获取product/total/type or category失败：" + result.msg);
                                    }
                                }
                            })
                            ;

                            PageClick(1);

                            var menu_ul = $('.menu-drop > li > ul'),
                                    menu_a = $('.menu-drop > li > a');
                            menu_ul.hide();
                            menu_a.click(function (e) {
                                e.preventDefault();
                                if (!$(this).hasClass('active')) {
                                    menu_a.removeClass('active');
                                    menu_ul.filter(':visible').slideUp('normal');
                                    $(this).addClass('active').next().stop(true, true).slideDown('normal');
                                } else {
                                    $(this).removeClass('active');
                                    $(this).next().stop(true, true).slideUp('normal');
                                }
                            });

                        }
                );


                //                    <![CDATA[
                //加载分类
                var idList = $(".items");
                $(idList).each(function (index1, item1) {
                    var num = $(item1).attr("id");
                    $.post("/fleastreet/category/" + num.substr(1, 3), function (data) {
                        if (data.code == 0) {
                            var list = $("#" + num).find('.cute');
                            $(data.data).each(function (index, item) {
                                var cat = $("<li class=''><a href='/fleastreet/category/type/" + item.productTypeId + "'>" + item.typeName + "</a></li>");
                                list.append(cat);
                            })

                        } else {
                            layer.msg("获取产品列表错误，请检查数据库");
                        }
                    })
                });
                //                    ]]>
                function PageClick(pageclickednumber) {
                    $("#pager").pager({
                        pagenumber: pageclickednumber,
                        pagecount: pagetotal,
                        buttonClickCallback: PageClick
                    });
                    $.ajax({
                        type: "post",
                        //分页查询，每页12个
                        url: urltwo + pageclickednumber + "?pageSize=" + pageSize,
                        success: function (result) {
                            if (result.code == 0) {
                                appendToPage(result.data);
                            } else {
                                layer.msg("获取/product/list/category or type失败：" + result.msg);
                            }
                        }
                    });
                }

                // 将数据渲染进页面
                function appendToPage(data) {
                    if (!data || !data.length > 0) {
                        return;
                    }
                    var page = $(".content-top1");
                    //清空页面
                    page.html("");
                    //遍历渲染
                    for (var i = 0; i < data.length; i++) {
                        var colmd3 = $("<div class='col-md-3 col-md2' style='margin-bottom: 40px;'></div>");
                        var colmd1 = $("<div class='col-md1 simpleCart_shelfItem' style='width:220px;'> </div>");
                        var url = '/fleastreet/product/' + data[i].productId;
                        var aref = $("<a href='" + url + "'></a>");
                        var imageSrc = '/fleastreet/manager/product/img/' + data[i].productId;
                        var arefInner = $("<img style='height: 150px;width: 150px' class='img-responsive' src='" + imageSrc + "'/>");
                        aref.append(arefInner);
                        var h3inner = $("<h6 style='height: 50px;overflow: hidden;'>" + data[i].name + "</a></h6>");
                        var divprice = $("<div class='price'></div>");
                        var h5inner = $("<h5 class='item_price'>¥" + data[i].price + "</h5>");
                        var value = data[i].productId;
                        var ainner = $("<a  onclick='addCart(" + value + ")' class='item_add'>加入购物车</a>");
                        var clearinner = $("<div class='clearfix'></div>");
                        divprice.append(h5inner);
                        divprice.append(ainner);
                        divprice.append(clearinner);
                        colmd1.append(aref);
                        colmd1.append(h3inner);
                        colmd1.append(divprice);
                        colmd3.append(colmd1);
                        page.append(colmd3);

                    }
                }
                ;
                function addCart(productId) {//加入购物车
                    if (!productId) {
                        layer.msg("错误！");
                        return;
                    }
                    $.get("/fleastreet/product/cart/add?productId=" + productId, function (data) {
                        if (data.code == 0) {
                            layer.msg("添加购物车成功！");
                        } else {
                            layer.msg(data.msg);
                        }
                    });
                }
                ;
            </script>
            <!--//menu-->
            <!--seller-->
        <!--    <div class="product-bottom">
                <h3 class="cate">热卖</h3>
                <div class="product-go">
                    <div class=" fashion-grid">
                        <img class="img-responsive " src="../../static/frontend/images/pr.jpg"
                             th:src="@{/frontend/images/pr.jpg}" alt=""></a>
                    </div>
                    <div class=" fashion-grid1">
                        <h6 class="best2">这是展示用一号服装</a></h6>
                        <span class=" price-in1"> ￥40.00</span>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="product-go">
                    <div class=" fashion-grid">
                        <img class="img-responsive " src="../../static/frontend/images/pr1.jpg"
                             th:src="@{/frontend/images/pr1.jpg}" alt=""></a>
                    </div>
                    <div class=" fashion-grid1">
                        <h6 class="best2">这是展示用二号服装</a></h6>
                        <span class=" price-in1"> ￥40.00</span>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="product-go">
                    <div class=" fashion-grid">
                        <img class="img-responsive " src="../../static/frontend/images/pr2.jpg"
                             th:src="@{/frontend/images/pr2.jpg}" alt=""></a>
                    </div>
                    <div class=" fashion-grid1">
                        <h6 class="best2">这是展示用三号服装</a></h6>
                        <span class=" price-in1"> ￥40.00</span>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="product-go">
                    <div class=" fashion-grid">
                        <img class="img-responsive " src="../../static/frontend/images/pr3.jpg"
                             th:src="@{/frontend/images/pr3.jpg}" alt=""></a>
                    </div>
                    <div class=" fashion-grid1">
                        <h6 class="best2">这是展示用四号服装</a></h6>
                        <span class=" price-in1"> ￥40.00</span>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>-->

            <!--//seller-->
            <!--tag-->
            <div class="tags">
                <h3 class="cate">标签</h3>
                <div class="tag">
                    <ul>
                        <li><a href="#">SpringBoot</a></li>
                        <li><a href="#">Nginx</a></li>
                        <li><a href="#">BootStrap</a></li>
                        <li><a href="#">RESTful</a></li>
                        <li><a href="#">spring</a></li>
                        <li><a href="#">redis</a></li>
                        <li><a href="#">mysql</a></li>
                        <li><a href="#">thymeleaf</a></li>
                        <li><a href="#">mybatis</a></li>
                        <li><a href="#">Logback</a></li>
                        <li><a href="#">jquery</a></li>
                        <li><a href="#">layui</a></li>
                        <li><a href="#">pager</a></li>
                        <li><a href="#">druid</a></li>
                        <div class="clearfix"></div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    <div id="pager" style="margin-left: 600px"></div>
</div>
<!--//content-->
<!--footer-->

<div th:replace="frontend/common::footer"></div>

<!--//footer-->
</body>
</html>